'use client'
// src/app/projects/[id]/analyses/page.tsx
// Input: params.id — project id
// Output: Analyses screen with 4 tabs: amplitude, FFT, timeline, heatmap
// Rationale: US4 — switch between analysis types without page reload

import { useState, useMemo } from 'react'
import { use } from 'react'
import { AnimatePresence, motion } from 'framer-motion'
import { Activity, Waves, Clock, Grid3x3, Download, FileDown } from 'lucide-react'

import { AppShell } from '@/components/shell/AppShell'
import { Breadcrumbs } from '@/components/shell/Breadcrumbs'
import { PageHeader } from '@/components/shell/PageHeader'
import { Tabs } from '@/components/ui/Tabs'
import { Button } from '@/components/ui/Button'
import { EmptyState } from '@/components/ui/EmptyState'

import { AnalysisHeader } from '@/components/analyses/AnalysisHeader'
import { AmplitudePanel } from '@/components/analyses/AmplitudePanel'
import { FFTPanel } from '@/components/analyses/FFTPanel'
import { TimelinePanel } from '@/components/analyses/TimelinePanel'
import { HeatmapPanel } from '@/components/analyses/HeatmapPanel'

import { projects } from '@/lib/mock'

type TabId = 'amplitude' | 'fft' | 'timeline' | 'heatmap'

const TABS = [
  { id: 'amplitude' as TabId, label: 'Amplitudes',  icon: <Activity  size={14} strokeWidth={1.5} /> },
  { id: 'fft'       as TabId, label: 'Spectre FFT', icon: <Waves     size={14} strokeWidth={1.5} /> },
  { id: 'timeline'  as TabId, label: 'Événements',  icon: <Clock     size={14} strokeWidth={1.5} /> },
  { id: 'heatmap'   as TabId, label: 'Anomalies',   icon: <Grid3x3   size={14} strokeWidth={1.5} /> },
]

interface PageProps {
  params: Promise<{ id: string }>
}

export default function AnalysesPage({ params }: PageProps) {
  const { id } = use(params)
  const [activeTab, setActiveTab] = useState<TabId>('amplitude')

  const project = useMemo(() => projects.find((p) => p.id === id), [id])

  if (!project) {
    return (
      <AppShell>
        <EmptyState
          icon={<Grid3x3 size={32} strokeWidth={1.5} />}
          title="Projet introuvable"
          description={`Aucun projet avec l'identifiant "${id}"`}
          action={<Button variant="primary" onClick={() => window.history.back()}>Retour</Button>}
        />
      </AppShell>
    )
  }

  const breadcrumbs = [
    { label: 'Projets', href: '/projects' },
    { label: project.name, href: `/projects/${id}` },
    { label: 'Analyses' },
  ]

  return (
    <AppShell topbarContent={<Breadcrumbs items={breadcrumbs} />}>
      <PageHeader
        title="Analyses"
        description={project.name}
        actions={
          <Button
            variant="secondary"
            size="md"
            iconLeft={<FileDown size={15} strokeWidth={1.5} />}
          >
            Exporter rapport
          </Button>
        }
      />

      <AnalysisHeader project={project} />

      <Tabs
        tabs={TABS}
        active={activeTab}
        onChange={(id) => setActiveTab(id as TabId)}
        className="mb-6"
      />

      <AnimatePresence mode="wait">
        <motion.div
          key={activeTab}
          initial={{ opacity: 0, y: 6 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: -4 }}
          transition={{ duration: 0.18, ease: [0.65, 0, 0.35, 1] }}
        >
          {activeTab === 'amplitude' && <AmplitudePanel project={project} />}
          {activeTab === 'fft'       && <FFTPanel       project={project} />}
          {activeTab === 'timeline'  && <TimelinePanel  project={project} />}
          {activeTab === 'heatmap'   && <HeatmapPanel   project={project} />}
        </motion.div>
      </AnimatePresence>
    </AppShell>
  )
}